<!--
 * @Author: your name
 * @Date: 2021-09-28 11:45:27
 * @LastEditTime: 2021-09-28 14:48:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\Price.vue
-->
<template>
  <div>
    <section class="price" id="price">

    <h1 class="heading"> our <span>price</span> </h1>

    <div class="box-container">

        <div class="box">
            <h3 class="title">for birthdays</h3>
            <h3 class="amount">$250.99</h3>
            <ul>
                <li><i class="fas fa-check"></i>full services</li>
                <li> <i class="fas fa-check"></i> decorations </li>
                <li> <i class="fas fa-check"></i> music and photos </li>
                <li> <i class="fas fa-check"></i> food and drinks </li>
                <li> <i class="fas fa-check"></i> invitation card </li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

        <div class="box">
            <h3 class="title">for weddings</h3>
            <h3 class="amount">$450.99</h3>
            <ul>
                <li><i class="fas fa-check"></i>full services</li>
                <li> <i class="fas fa-check"></i> decorations </li>
                <li> <i class="fas fa-check"></i> music and photos </li>
                <li> <i class="fas fa-check"></i> food and drinks </li>
                <li> <i class="fas fa-check"></i> invitation card </li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

        <div class="box">
            <h3 class="title">for concerts</h3>
            <h3 class="amount">$650.99</h3>
            <ul>
                <li><i class="fas fa-check"></i>full services</li>
                <li> <i class="fas fa-check"></i> decorations </li>
                <li> <i class="fas fa-check"></i> music and photos </li>
                <li> <i class="fas fa-check"></i> food and drinks </li>
                <li> <i class="fas fa-check"></i> invitation card </li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

        <div class="box">
            <h3 class="title">for others</h3>
            <h3 class="amount">$850.99</h3>
            <ul>
                <li><i class="fas fa-check"></i>full services</li>
                <li> <i class="fas fa-check"></i> decorations </li>
                <li> <i class="fas fa-check"></i> music and photos </li>
                <li> <i class="fas fa-check"></i> food and drinks </li>
                <li> <i class="fas fa-check"></i> invitation card </li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

    </div>


</section>
  </div>
</template>
<script>
export default {
  
}
</script>
<style >
  .price .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.price .box-container .box{
    padding:2rem 0;
    background:#fffae6;
    border-radius: .5rem;
    text-align: center;
}

.price .box-container .box:hover{
    transform: scale(1.03);
}

.price .box-container .box .title{
    background:var(--main-color);
    color:black;
    padding:3rem 0;
    font-size: 2rem;
}

.price .box-container .box .amount{
    color:black;
    padding-top: 3rem;
    font-size: 4rem;
}

.price .box-container .box ul{
    list-style-type: none;
    padding:2rem 0;
}

.price .box-container .box ul li{
    font-size: 1.5rem;
    color:black;
    padding:1rem 0;
}

.price .box-container .box ul li i{
    color:var(--main-color);
    padding-right: .5rem;
}
</style>